<template>
    <div>
        <ul class="photo-header">
            <li>
                <el-select v-model="group_id" @change="onGroupChange">
                    <el-option v-for="group in groups"
                               :key="group.id"
                               :label="group.name"
                               :value="group.id"
                    />
                </el-select>
            </li>

            <li>
                <el-button icon="el-icon-refresh" @click="onClickRefresh"></el-button>
            </li>
        </ul>

        <div class="photo-container" v-loading="loading">
            <vue-scroll>
                <template v-for="file in list">
                    <div :key="file.id" class="file-box" @click="onClickSelect(file)">
                        <img :src="file.src"/>

                        <div class="file-ok"
                             v-show="selected.indexOf(file.id) > -1"></div>
                    </div>
                </template>
            </vue-scroll>
        </div>

        <div style="margin-top: 20px">
            <el-pagination :current-page="page"
                           :page-size="limit"
                           :total="total"
                           @current-change="onPageChange"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { UploadDialogModule } from '@/components/app-upload/store';
import { FileModel } from '@/models/file.model';
import { getUploadImages } from '@/services/upload.service';

@Component({ name: 'AppUploadPhoto' })
export default class AppUploadPhoto extends Vue {
    group_id: number = 0;
    list: FileModel[] = [];
    total: number = 0;
    page: number = 1;
    limit: number = 20;
    selected: number[] = [];
    loading: boolean = false;

    get groups() {
        return UploadDialogModule.groups;
    }

    mounted() {
        this.getList();
    }

    /**
     * 获取列表
     */
    getList() {
        this.loading = true;
        getUploadImages(this.page, this.limit, this.group_id)
            .finally(() => {
                this.loading = false;
            })
            .then(result => {
                this.list = result.data.items;
                this.total = result.data.total;
            })
    }

    /**
     * 刷新
     */
    onClickRefresh() {
        this.page = 1;
        this.getList();
    }

    /**
     * 分组修改
     */
    onGroupChange(id: number) {
        this.page = 1;
        this.getList();
    }

    /**
     * 页码更新
     * @param page
     */
    onPageChange(page: number) {
        this.page = page;
        this.getList();
    }

    /**
     * 取消选择
     */
    clearSelected() {
        this.selected = [];
    }

    /**
     * 选择
     * @param file
     */
    onClickSelect(file: FileModel) {
        const idx = this.selected.indexOf(file.id);
        if (UploadDialogModule.info.multi) {
            // 多选
            if (idx === -1) {
                this.selected.push(file.id);
                UploadDialogModule.addFile(file);
            } else {
                this.selected.splice(idx, 1);
                UploadDialogModule.removeFile(idx);
            }
        } else {
            // 单选
            if (idx === -1) {
                this.selected = [file.id];
                UploadDialogModule.addFile(file);
            } else {
                this.selected = [];
                UploadDialogModule.removeFile(idx);
            }
        }
    }
}
</script>

<style scoped lang="scss">
.photo-container {
    margin-top: 10px;
    height: 300px;
    border: solid 1px #efefef;
    overflow-y: auto;
    padding: 10px;
}
.photo-header {
    display: flex;
    justify-content: space-between;
    li {

    }
}
.file-box {
    width: 110px;
    height: 110px;
    display: inline-block;
    margin: 5px;
    box-sizing: border-box;
    border: solid 1px #efefef;
    position: relative;
    &:hover {
        cursor: pointer;
        border: solid 1px #5690D2;
    }
    img {
        width: 100%;
        height: 100%;
    }
}
.file-ok {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    background-image: url('../images/success.png');
    background-size: 100% 100%;
}
.file-time {
    font-size: 12px;
}
</style>
